{% extends "generic/object_edit.html" %}
{% load form_helpers %}

{% block form %}
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Secret</strong></div>
        <div class="panel-body">
            {% render_field form.name %}
            {% render_field form.slug %}
            {% render_field form.description %}
            {% render_field form.provider %}
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Parameters</strong></div>
        <div class="panel-body">
            <span class="help-block">
                All parameter values can be entered as Jinja2 templates if desired.
                The requesting object (device, Git repository, etc.), if any, will be provided
                as context variable <code>obj</code>.
            </span>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#parameters_form" role="tab" data-toggle="tab">Form</a>
                </li>
                <li role="presentation">
                    <a href="#parameters_json" role="tab" data-toggle="tab">JSON</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="parameters_form">
                    <!-- to be populated by jquery -->
                </div>
                <div class="tab-pane" id="parameters_json">
                    {% render_field form.parameters %}
                </div>
            </div>
        </div>
    </div>
    {% include 'inc/extras_features_edit_form_fields.html' %}
{% endblock form %}

{% block javascript %}
<script type="text/javascript">
    /* When changing any field in the parameters_form, re-render the JSON in parameters_json */
    function changeProviderParameter() {
        var parameters_value = {};

        $("#parameters_form :input").each(function() {
            parameters_value[$(this).attr("name")] = $(this).val();
        });

        $("#id_parameters").val(JSON.stringify(parameters_value, null, 4));
    };

    /* When changing the parameters_json, update all fields in the parameters_form accordingly */
    function changeProviderJSON() {
        var parameters_as_json = $(this).val();
        var parameters_value;
        try {
            parameters_value = JSON.parse(parameters_as_json);
        } catch (e) {
            alert("JSON is invalid");
            return;
        }

        for (const key of Object.keys(parameters_value)) {
            $("#parameters_form [name='" + key + "']").val(parameters_value[key]);
        }
    };

    /* When changing the selected provider, retrieve and render the provider-specific content to parameters_form */
    function changeProvider() {
        var provider_slug = $("#id_provider").val();

        var parameters_as_json = $("#id_parameters").val();
        var parameters_value;
        try {
            parameters_value = JSON.parse(parameters_as_json);
        } catch (e) {
            parameters_value = {};
        }

        $.ajax({
            url: "{% url 'extras:secret_list' %}" + "provider/" + provider_slug + "/form/",
            method: "GET",
            data: parameters_value,
            context: this,
            success: function(data) {
                $("#parameters_form").html(data);
                $("#parameters_form :input").change(changeProviderParameter);
            },
            error: function() {
                $("#parameters_form").html("No form available for this provider, use JSON instead");
            },
        });
    };

    $(document).ready(function() {
        $("#id_provider").change(changeProvider);
        changeProvider();
        $("#id_parameters").change(changeProviderJSON);
    });
</script>
{% endblock javascript %}
